//@ts-nocheck
import { SwiperRef } from 'antd-mobile/es/components/swiper';
import videojs from 'video.js';
// 引入axios
import server from '@/utlis/server';
import 'video.js/dist/video-js.css';
import React, { Fragment, useEffect, useRef, useState } from 'react';
import { CapsuleTabs, Rate } from 'antd-mobile';
import { NavBar } from 'react-vant';
import { StarOutline } from 'antd-mobile-icons';
import './index.less';
import { history } from 'umi';
import { ShareSheet, Button } from 'react-vant';
import { Cell, Video, Audio } from '@nutui/nutui-react';
import '@nutui/nutui-react/dist/style.css';
import '@/pages/golobo.less';
import 'lib-flexible';
import wx from './img/微信.png';
import qqkj from './img/QQ空间.png';
import wb from './img/微博.png';
import qqhy from './img/QQ.png';
import xkpcom from './img/想看.png';
import { DemoBlock } from 'demos';
import nb from './img/nb.png';
import sb from './img/sb.png';
import nm from './img/nm.png';
import az from './img/蜡笔小新.jpg';
import nmb from './img/111.jpg';
import nsb from './img/444.jpg';
import n2b from './img/2.png';
import ncb from './img/3.png';
import maiyan from '../../static/猫眼.png';

export default function Index(props) {
  // 底部数据
  let [bottomdata, setbottomdata] = useState([]);
  let [activekey, setactivekey] = useState('fruits');
  // 数据对象
  let [oneplayer, setoneplayer] = useState({});
  //视频
  const {} = props;
  const videoRef = useRef(null);
  const playerRef = useRef(null);
  const [option, setOptopm] = useState({});

  const onReadyPlay = (palyer) => {
    videoRef.current = palyer;
    palyer.play();
  };

  const init = () => {
    let _option = {
      controls: true,
      loop: false, //视频播放结束后，是否循环播放
      notSupportedMessage: '此视频暂无法播放，请稍后再试',
      poster: 'https://t7.baidu.com/it/u=1819248061,230866778&fm=193&f=GIF', //视频封面
      controlBar: {
        // timeDivider: true,//是否显示时间控制条，默认为true
        // remainingTimeDisplay: false,//是否显示剩余时间，默认为true
        // fullscreenToggle: true // 全屏按钮
        children: [
          //自定义
          { name: 'playToggle' }, // 播放按钮
          {
            name: 'volumePanel', // 音量控制
            inline: false, // 不使用水平方式
          },
          { name: 'currentTimeDisplay' }, // 当前已播放时间
          { name: 'durationDisplay' }, // 总时间
          { name: 'progressControl' }, // 播放进度条
          {
            name: 'pictureInPictureToggle', //支持画中画
          },
          {
            name: 'FullscreenToggle', //支持全屏
          },
        ],
      },
    };

    setOptopm(_option);

    if (!playerRef.current) {
      const videoElement = videoRef.current;
      if (!videoElement) return;

      const player = (playerRef.current = videojs(
        videoElement,
        _option,
        () => {},
      ));
      onReadyPlay(player);
    }
  };
  //视频播放链接
  const [source, setSource] = useState({});
  // 获取底部数据
  let getdatabottom = async () => {
    let { data } = await server.get('/videobottom');
    // console.log(data);
    if (activekey == 'fruits') {
      setbottomdata(data.data1);
    } else if (activekey == 'vegetables') {
      setbottomdata(data.data2);
    } else {
      setbottomdata(data.data3);
    }
  };
  // 获取数据对象
  let getoneplayer = async () => {
    let id = props.location.state._id;

    let { data } = await server.get('/oneplay?id=' + id);
    // console.log(data.data);

    setoneplayer(data.data);
    setSource(data.data.pre_id);
    init();
  };
  useEffect(() => {
    getoneplayer();
    getdatabottom();
  }, []);

  //跳转电影详情页面
  let deta = () => {
    history.push({
      pathname: '/details',
      state: {
        _id: oneplayer._id,
      },
    });
  };

  //跳转电影预告页面
  let yugaoa = (item) => {
    history.push({
      pathname: '/yugao',
      state: {
        _id: item.pre_id._id,
      },
    });
  };
  // 获取当前事件
  let getnewdata = () => {
    let data = new Date();
    let year = data.getFullYear();
    let month = data.getMonth() + 1;
    let strDate = data.getDate();
    if (month < 10) month = `0${month}`; // 如果月份是个位数，在前面补0
    if (strDate < 10) strDate = `0${strDate}`; // 如果日是个位数，在前面补0

    return `${year}-${month}-${strDate}`;
  };
  let nummap = (mm) => {
    let num = Number(mm);
    return num.toFixed(1);
  };
  return (
    <div
      className="quanbu"
      style={{ width: '100%', height: '40.2rem', backgroundColor: 'white' }}
    >
      <div className="cvba">
        <NavBar title="电影预告" leftText="返回" onClickLeft={deta} />
      </div>
      <hr />
      <div className="sp" style={{ width: '100%', height: '5rem' }}>
        <Cell className="cell">
          <video
            style={{
              width: '100%',
              height: '5',
            }}
            ref={videoRef}
            className="video-js vjs-big-play-centered"
          >
            {/* 视频链接地址 */}
            <source src={source.src} type="video/mp4" />
            <source src={source.src} type="video/mp4" />
          </video>
        </Cell>
      </div>

      <hr />
      <div className="suduy">
        <h1>简介</h1>
        <h2>{oneplayer.self}</h2>
        <p className="vbnc">{getnewdata()}</p>
      </div>
      {/* <div className="fenxiangsss" >
        <span className="fxxxx">
          <h4 className="lknmv" >
            点击分享好友
          </h4>
          <img
            src={qqhy}
            alt=""

            className="thjd"
          />
          <img
            src={qqkj}
            alt=""

            className="thjds"
          />
          <img
            src={wx}
            alt=""

            className="thjdd"
          />
          <img
            src={wb}
            alt=""

            className="thjdf"
          />
        </span>
      </div> */}
      <div className="xklanb">
        <img src={oneplayer.image} alt={oneplayer.name} />
        <div className="oneself">
          <h3>{oneplayer.name}</h3>
          <p>{oneplayer.type}</p>
        </div>
        <div className="onebtn">
          <Button round type="info">
            想看
          </Button>
        </div>
      </div>
      <div className="onepingnum">
        <h6>
          <img src={maiyan} alt="" />
          <span>购票评分</span>
        </h6>
        <div className="oneRate">
          <span>{nummap(oneplayer.pin_numL)}</span>
          <Rate readOnly allowHalf value={oneplayer.pin_numL}></Rate>
        </div>
      </div>
      <div
        className="suduhj"
        style={{
          width: '100%',
          height: '17.3rem',
          backgroundColor: '',
          marginTop: '1rem',
        }}
      >
        <div className="fbvbvm">
          <CapsuleTabs
            activeKey={activekey}
            onChange={(key) => {
              setactivekey(key);
              getdatabottom();
            }}
          >
            <CapsuleTabs.Tab title="为你推荐" key="fruits">
              {bottomdata.map((item) => {
                return (
                  <Fragment key={item._id}>
                    <div
                      className="vbnmxgf"
                      style={{ width: '100%', height: '3rem' }}
                      onClick={() => {
                        yugaoa();
                      }}
                    >
                      <span>
                        <img
                          src={item.paly_id.image}
                          alt=""
                          className="vbncfl"
                          style={{
                            width: '3.5rem',
                            height: '2rem',
                            padding: '0.5rem',
                          }}
                        />
                      </span>
                      <p
                        className="qbmdbswz"
                        style={{
                          marginLeft: '4.5rem',
                          marginTop: '-2.5rem',
                        }}
                      >
                        {item.paly_id.self}
                      </p>
                    </div>
                    <hr />
                  </Fragment>
                );
              })}
            </CapsuleTabs.Tab>
            <CapsuleTabs.Tab title="热门播放" key="vegetables">
              {bottomdata.map((item) => {
                return (
                  <Fragment key={item._id}>
                    <div
                      className="vbnmxgf"
                      style={{ width: '100%', height: '3rem' }}
                      onClick={() => {
                        yugaoa();
                      }}
                    >
                      <span>
                        <img
                          src={item.paly_id.image}
                          alt=""
                          className="vbncfl"
                          style={{
                            width: '3.5rem',
                            height: '2rem',
                            padding: '0.5rem',
                          }}
                        />
                      </span>
                      <p
                        className="qbmdbswz"
                        style={{
                          marginLeft: '4.5rem',
                          marginTop: '-2.5rem',
                        }}
                      >
                        {item.paly_id.self}
                      </p>
                    </div>
                    <hr />
                  </Fragment>
                );
              })}
            </CapsuleTabs.Tab>
            <CapsuleTabs.Tab title="新片上映" key="animals">
              {bottomdata.map((item) => {
                return (
                  <Fragment key={item._id}>
                    <div
                      className="vbnmxgf"
                      style={{ width: '100%', height: '3rem' }}
                      onClick={() => {
                        yugaoa(item);
                      }}
                    >
                      <span>
                        <img
                          src={item.paly_id.image}
                          alt=""
                          className="vbncfl"
                          style={{
                            width: '3.5rem',
                            height: '2rem',
                            padding: '0.5rem',
                          }}
                        />
                      </span>
                      <p
                        className="qbmdbswz"
                        style={{
                          marginLeft: '4.5rem',
                          marginTop: '-2.5rem',
                        }}
                      >
                        {item.paly_id.self}
                      </p>
                    </div>
                    <hr />
                  </Fragment>
                );
              })}
            </CapsuleTabs.Tab>
          </CapsuleTabs>
        </div>
      </div>
      {/* <div
        className="fhgbcv"
        style={{ width: '100%', height: '4rem', backgroundColor: '#f4f4f4' }}
      >
        <p
          className="gfsiem"
          style={{ textAlign: 'center', padding: '0.5rem' }}
        >
          麻豆电影 客服电话：
          <a href="###" style={{ color: 'red' }}>
            1010-1234-567
          </a>
        </p>
        <p
          className="mcbdkhf"
          style={{ textAlign: 'center', padding: '-0.5rem' }}
        >
          京ICP备16022489号-1 京公网安备11010102003232号
        </p>
        <p className="lvvdw" style={{ textAlign: 'center', padding: '0.5rem' }}>
          台湾麻豆文化传媒有限公司
        </p>
      </div> */}
    </div>
  );
}
